import React, { useState } from 'react';
import ReactDOM from 'react-dom';
function App() {
  // 每一次的视图更新 都是一次函数组件的重新执行，也就是每一次执行都有一个独立的作用域
  // 每次视图的更新都会形成一个独立的闭包
  // 惰性初始化：useState 初始化只会执行一次
  let [count, setCount] = useState(() => {
    console.log('init')
    return 100
  })
  console.log('render', count)
  const log = () => {
    setTimeout(() => {
      console.log(count)
    }, 4000);
  }
  return <>
    <h1>{count}</h1>
    <button onClick={() => setCount(count + 10)}>+</button>
    <button onClick={log}>log</button>
  </>
}

ReactDOM.render(<App />, document.getElementById('root'))